<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Layui Page</title>
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./src/css/global.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-tab-item layui-show site-demo">
        <div class="layui-main">
            <blockquote class="layui-elem-quote layui-text">
                下方是所有的分页的样式，可以根据心情随意转换哦。至于ajax请求数据的分页可以查看test_page.html,用户可以直接copy代码，稍微改动一下即可，呐~，这是例子：<a href="test_page.html">测试版分页test_page.html</a>
            </blockquote>
            总页数低于页码总数：
            <div id="demo0"></div>
            总页数大于页码总数：
            <div id="demo1"></div>
            自定义主题：
            <div id="demo2"></div>
            自定义首页、尾页、上一页、下一页文本：
            <div id="demo3"></div>
            不显示首页尾页：
            <div id="demo4"></div>
            开启HASH：
            <div id="demo5"></div>
            只显示上一页、下一页：
            <div id="demo6"></div>
            显示完整功能：
            <div id="demo7"></div>
            自定义排版：
            <div id="demo8"></div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                <legend>将一段已知数组分页展示</legend>
            </fieldset>

            <div id="demo9"></div>

            <ul id="biuuu_city_list"></ul>
        </div>

    </div>
</div>

</body>
<script src="./plugins/layui/layui.js"></script>
<script>
  layui.use(['laypage', 'layer'], function () {
    var laypage = layui.laypage
        , layer = layui.layer;
    //总页数低于页码总数
    laypage.render({
      elem: 'demo0'
      , count: 12 //数据总数
    });

    //总页数大于页码总数
    laypage.render({
      elem: 'demo1'
      , count: 70 //数据总数
      , jump: function (obj) {
        console.log(obj)
      }
    });

    //自定义样式
    laypage.render({
      elem: 'demo2'
      , count: 100
      , theme: '#1E9FFF'
    });

    //自定义首页、尾页、上一页、下一页文本
    laypage.render({
      elem: 'demo3'
      , count: 100
      , first: '首页'
      , last: '尾页'
      , prev: '<em>←</em>'
      , next: '<em>→</em>'
    });

    //不显示首页尾页
    laypage.render({
      elem: 'demo4'
      , count: 100
      , first: false
      , last: false
    });

    //开启HASH
    laypage.render({
      elem: 'demo5'
      , count: 500
      , curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
      , hash: 'fenye' //自定义hash值
    });

    //只显示上一页、下一页
    laypage.render({
      elem: 'demo6'
      , count: 50
      , layout: ['prev', 'next']
      , jump: function (obj, first) {
        if (!first) {
          layer.msg('第 ' + obj.curr + ' 页');
        }
      }
    });

    //完整功能
    laypage.render({
      elem: 'demo7'
      , count: 100
      //,groups: 0
      , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
      , jump: function (obj) {
        console.log(obj)
      }
    });

    //自定义排版
    laypage.render({
      elem: 'demo8'
      , count: 1000
      , layout: ['limit', 'prev', 'page', 'next']
      //,limits: [100, 200, 300]
      , limit: 200
    });


    //将一段数组分页展示

    //测试数据
    var data = [
      '北京',
      '上海',
      '广州',
      '深圳',
      '杭州',
      '长沙',
      '合肥',
      '宁夏',
      '成都',
      '西安',
      '南昌',
      '上饶',
//      '沈阳',
//      '济南',
//      '厦门',
//      '福州',
//      '九江',
//      '宜春',
//      '赣州',
//      '宁波',
//      '绍兴',
//      '无锡',
//      '苏州',
//      '徐州',
//      '东莞',
//      '佛山',
//      '中山',
//      '成都',
//      '武汉',
//      '青岛',
//      '天津',
//      '重庆',
//      '南京',
//      '九江',
//      '香港',
//      '澳门',
//      '台北'
    ];

    //调用分页
    laypage.render({
      elem: 'demo9'
      , count: data.length
      , jump: function (obj) {
        //模拟渲染
        document.getElementById('biuuu_city_list').innerHTML = function () {
          var arr = []
              , thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
          layui.each(thisData, function (index, item) {
            arr.push('<li>' + item + '</li>');
          });
          return arr.join('');
        }();
      }
    });

  });
</script>
</html>